import React from 'react';
import './style/';
import {WeaTools,WeaLocaleProvider} from "ecCom";
import objectAssign from "object-assign";
import {Carousel, Checkbox} from 'antd';
import Setting from "./setting";
import E7Form from "./E7Form";
class E7Login extends React.Component {


    state = {
        data:{
            id:'',
            setting:{
                logoImage:"",
                bgImage:"",
            },
        },
        settingVisiable:false,
        defaultSetting : {
            logoImage: '/wui/theme/ecology7/page/images/login/lg_bg1_wev8.jpg,/wui/theme/ecology7/page/images/login/lg_bg2_wev8.jpg,/wui/theme/ecology7/page/images/login/lg_bg3_wev8.jpg',
            bgImage: '/wui/theme/ecology7/page/images/login/login_cbg_wev8.png'
        }
    }

    setStateData = (data)=>{
        this.setState(data)
    }

    load = (id)=>{
        WeaTools.callApi('/api/portalTs/e7form/saveInitE7form', 'POST', {"json":JSON.stringify({id:id,setting:JSON.stringify(this.state.defaultSetting)})}).then((result) => {
            if (result.status == true) {
                if(result.data != null){
                    let data = result.data
                    data.setting = JSON.parse(data.setting)
                    this.setState({data:data})
                }
            }
        });
    }

    componentWillMount(){
        const id = this.props.id
        this.load(id)
    }


    render(){
        let {logoImage,bgImage} = this.state.data.setting
        const {id,isSetting} = this.props;
        let logoImageComp = <div/>;
        if (logoImage) {
            const logoImageArr = logoImage.split(',');
            if (logoImageArr.length > 1) {
                logoImageComp = (
                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@5fpw3a`} autoplay={true} dots={true}>
                        {
                            logoImageArr.slice(0, 3).map((item, index) => {
                                return (
                                    <div key={index} style={{width:'920px',height:'260px',overflow:'hidden'}}>
                                        <img src={item} alt=""/>
                                    </div>
                                );
                            })
                        }
                    </Carousel>
                );
            } else {
                logoImageComp = <img src={logoImage} alt=""/>
            }
        }

        let bgImageSrc = bgImage;
        return (
            <div style={{width: '100%',height:'100%',position:'relative'}} onMouseLeave={()=>{$(".lr_settingButtons_"+id).hide()}} onMouseEnter={()=>{$(".lr_settingButtons_"+id).show()}}>
                <div className={"E7form"} style={{height:'100%',position:'relative','overflow':'auto'}} >
                    <div style={{width:'990px',height:'610px','background-image':'url('+bgImageSrc+')' ,'background-size':'100% 100%',position:'relative',margin:'0 auto'}} >
                        <div style={{position:'absolute',overflow:'hidden',width:'920px',height:'260px','margin-left':'35px','margin-top':'125px'}}>
                            {logoImageComp}
                        </div>
                        <div style={{position:'absolute',width:'240px',height:'180px',top:'391px',left:"710px"}}>
                            <E7Form ecId={`${this && this.props && this.props.ecId || ''}_E7Form@ynx2l2`} {...this.props}/>
                        </div>
                    </div>
                </div>
                <Setting ecId={`${this && this.props && this.props.ecId || ''}_Setting@dx683b`} state={this.state} setStateData={this.setStateData} ></Setting>
                {
                    isSetting == true
                        ?(
                            <div className={"lr_settingButtons_"+id +" lr_settingButtons_class"}>
                                <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {this.setState({settingVisiable:true}) }}></span>
                            </div>
                        ):""
                }
            </div>
        );
    }



}
export default E7Login;